import { getCurrentInstance, nextTick, onMounted, onUnmounted, watch } from 'vue'
import { VtargetRef } from './table'
import { VTableProps } from './vtableProps'

export const useScroll = (props: VTableProps, targetRef: VtargetRef, state: any) => {
  const instance = getCurrentInstance()!

  // watch(
  //   () => props.data,
  //   (a, b) => {
  //     console.log('console.dir', targetRef.value.$el.clientHeight, trHeight, getTrHeight())
  //     console.dir(targetRef.value.$refs.tableBody.clientHeight)
  //   }
  // )

  // 计算可见区域的列表项范围
  function calculateVisibleItems() {
    // 根据表格行的高度设置滚动
    let trHeight = 0
    let ClientContentHeight = 0
    let clientLength = 0 // 可视区域展示数据的长度
    let clientTotallX = 0

    // 计算 tr 高度
    if (!trHeight) trHeight = targetRef.value.$el.querySelector('tr').clientHeight

    // 计算 可视区 高度
    if (!ClientContentHeight) ClientContentHeight = targetRef.value.$el.clientHeight

    // 根据 数据 和 可视区域计算 可视区域可展示多少调数据
    const clientHeight = targetRef.value.$el.clientHeight / trHeight
    clientLength = Math.ceil(clientHeight)

    // 数据的总高度
    clientTotallX = props.data.length * trHeight

    // 计算可展示区域 开始和结束的索引
    const { scrollTop } = targetRef.value.$refs.scrollBarRef.wrapRef
    const startIndex = Math.floor(scrollTop / trHeight) // 开始区域的索引开始
    const endIndex = Math.min(props.data.length - 1, Math.ceil((scrollTop + ClientContentHeight) / trHeight))

    let clientStartX =
      startIndex * trHeight - ClientContentHeight < 0 ? ClientContentHeight : startIndex * trHeight - ClientContentHeight

    let clientEndX =
      endIndex * trHeight - ClientContentHeight < 0 ? ClientContentHeight : (endIndex - 2) * trHeight - ClientContentHeight
    console.log(
      'startIndex: ',
      startIndex,
      'endIndex',
      endIndex,
      `scrollTop,`,
      scrollTop,
      'clientStartX: ',
      clientStartX,
      'clientEndX: ',
      clientEndX
    )

    return {
      scrollTop,
      trHeight,
      ClientContentHeight,
      clientHeight,
      clientTotallX,
      clientStartX,
      clientEndX,
      startIndex,
      endIndex,
    }
  }

  // 更新可视区
  const updateVisibleContent = () => {
    // if (timeoutID) clearInterval(timeoutID)
    // timeoutID = setInterval(() => {
    triggerScrollClient()
    // }, 200)
  }

  let oldtimer = Date.now()
  const scrollEvenet = () => {
    let newTimer = Date.now()
    console.log(`->newTimer`, newTimer, newTimer - oldtimer > 300)
    if (newTimer - oldtimer > 200) {
      const { scrollTop, startIndex, endIndex, clientStartX, clientEndX } = calculateVisibleItems()

      const len = endIndex - startIndex

      if (len > props.data.length || len === -1) {
        state.tableData = props.data
        return
      }

      if (scrollTop <= clientStartX || scrollTop >= clientEndX) {
        triggerScrollClient()
      }

      oldtimer = Date.now()
    }
  }

  //
  function triggerScrollClient() {
    if (!props.data?.length) return

    const { startIndex, endIndex } = calculateVisibleItems()

    state.tableData = []
    props.data.map((row: any, index) => {
      if (index >= startIndex && index <= endIndex) {
        row.edit = true
        state.tableData.push(row)
      } else {
        row.edit = false
        state.tableData.push(row)
      }
    })
  }

  onMounted(() => {
    // 是否开启虚拟列表
    if (props.virtualize) {
      targetRef.value.$refs.scrollBarRef.wrapRef.addEventListener('scroll', scrollEvenet)
    }
  })

  onUnmounted(() => {
    if (props.virtualize) {
      targetRef.value.$refs.scrollBarRef.wrapRef.removeEventListener('scroll', scrollEvenet)
    }
  })

  return {
    updateVisibleContent,
  }
}
